import React, { useState, useEffect } from "react";
import { Tabs, Typography, Space, Spin, message } from "antd";
import {
  InfoCircleOutlined,
  FileOutlined,
  BookOutlined,
  FormOutlined,
  MessageOutlined,
} from "@ant-design/icons";
import { useParams } from "react-router-dom";
import { studentAPI } from "../../../services/api";
import type { CourseInfo as CourseInfoType } from "../types";
import CourseInfoComponent from "./components/CourseInfo";
import CourseResources from "./components/CourseResources";
import CourseAssignments from "./components/CourseAssignments";
import CourseExams from "./components/CourseExams";
import CourseDiscussion from "./components/CourseDiscussion";

const { Title } = Typography;

const CourseDetail: React.FC = () => {
  const { courseId } = useParams<{ courseId: string }>();
  const [loading, setLoading] = useState(true);
  const [courseInfo, setCourseInfo] = useState<CourseInfoType | null>(null);

  // 获取课程详情
  const fetchCourseDetail = async () => {
    if (!courseId) {
      message.error("课程ID无效");
      return;
    }

    try {
      console.log("📚 获取课程详情...", courseId);

      // 这里应该调用获取课程详情的API
      // const response = await studentAPI.getCourseDetail(courseId);

      // 由于API暂未实现，使用模拟数据
      await new Promise((resolve) => setTimeout(resolve, 1000)); // 模拟网络延迟

      const mockCourseInfo: CourseInfoType = {
        id: courseId,
        name: "高级Web开发",
        teacherName: "张教授",
        semester: "2023-2024-2",
        schedule: "周一 1-2节",
        classroom: "A301",
        credit: 4,
        description:
          "学习现代Web开发技术和框架，包括React、Vue、Node.js等前后端技术。",
      };

      setCourseInfo(mockCourseInfo);
      console.log("✅ 获取课程详情成功:", mockCourseInfo);
    } catch (error) {
      console.error("❌ 获取课程详情失败:", error);
      message.error("获取课程详情失败");
    } finally {
      setLoading(false);
    }
  };

  // 初始化数据
  useEffect(() => {
    fetchCourseDetail();
  }, [courseId]);

  if (loading) {
    return (
      <div style={{ padding: "24px", textAlign: "center" }}>
        <Spin size="large" tip="加载课程详情中..." />
      </div>
    );
  }

  if (!courseInfo) {
    return (
      <div style={{ padding: "24px", textAlign: "center" }}>
        <Title level={4}>课程信息未找到</Title>
      </div>
    );
  }

  const items = [
    {
      key: "info",
      label: (
        <span>
          <InfoCircleOutlined /> 课程信息
        </span>
      ),
      children: (
        <CourseInfoComponent courseInfo={courseInfo} loading={loading} />
      ),
    },
    {
      key: "resources",
      label: (
        <span>
          <FileOutlined /> 课程资源
        </span>
      ),
      children: <CourseResources />,
    },
    {
      key: "assignments",
      label: (
        <span>
          <FormOutlined /> 作业
        </span>
      ),
      children: <CourseAssignments />,
    },
    {
      key: "exams",
      label: (
        <span>
          <BookOutlined /> 考试
        </span>
      ),
      children: <CourseExams />,
    },
    {
      key: "discussion",
      label: (
        <span>
          <MessageOutlined /> 讨论区
        </span>
      ),
      children: <CourseDiscussion />,
    },
  ];

  return (
    <div style={{ padding: "24px" }}>
      <Space direction="vertical" style={{ width: "100%" }}>
        <Title level={2}>{courseInfo.name}</Title>
        <Tabs items={items} />
      </Space>
    </div>
  );
};

export default CourseDetail;
